
<div style="margin: auto;width: 900px;height: 500px;">

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>穿透服务</legend>
</fieldset>  

<blockquote class="layui-elem-quote">
  服务端状态：<span id="magicStatus"><font color='red'>未运行</font>  <button class='layui-btn layui-btn-small' onclick='OpenMagicService();'>开启服务</button></span>  
</blockquote>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>内网穿透代理</legend>
</fieldset>

<blockquote class="layui-elem-quote">
  NetAgent状态：<span id="netAgentStatus"><font color=red>未检测到Agent连接</font></span>  <button class="layui-btn layui-btn-small" onclick="GetNetAgentStatus();">刷新</button>
  <button class='layui-btn layui-btn-small' onclick='ClearNetAgentStatus();'>清空连接</button>
</blockquote>

  <div class="layui-form-item">
      <pre class="layui-code">
如果需要实现外网与内网端口的穿透，请将 Port-Forward 端部署在外网服务器上，将 NetAgent 部署在您的内网。

NetAgent 所在内网机器必须要能上网，能访问到 Port-Forward 所在的服务器。
Port-Forward 所在服务器，要确定相应的端口不被防火墙拦截，如果有拦截请修改防火墙配置。

NetAgent 下载 <a href="http://git.oschina.net/tavenli/port-forward/releases" target="_blank">http://git.oschina.net/tavenli/port-forward/releases</a>
      </pre> 
  </div>





</div>

<script type="text/javascript">

    $(document).ready(function () {

        layui.use(['jquery','layer', 'form', 'element'], function () {
            var $ = layui.jquery, form = layui.form();


        });

        GetMagicStatus();
        GetNetAgentStatus();

    });

    function OpenMagicService(){
        layer.confirm("确定开启穿透服务吗？", {
            btn: ['确定', '取消'] //按钮
        }, function(index, layero) {
            $.post("/u/OpenMagicService", {rnd: Math.random()}, function(json) {
            if (json.Code == 0) { //成功
                layer.msg("执行成功.");
                GetMagicStatus();
            } else { //失败
                layer.alert(json.Msg, {icon: 2});

            }
            }, 'json');
        });
    }

    function CloseMagicService(){
        layer.confirm("确定关闭穿透服务吗？", {
            btn: ['确定', '取消'] //按钮
        }, function(index, layero) {
            $.post("/u/CloseMagicService", {rnd: Math.random()}, function(json) {
            if (json.Code == 0) { //成功
                layer.msg("执行成功.");
                GetMagicStatus();
            } else { //失败
                layer.alert(json.Msg, {icon: 2});

            }
            }, 'json');
        });
    }

    function GetMagicStatus(){
        $.post("/u/GetMagicStatus",{rnd:Math.random()}, function(json) {
            var html = "";
            if(json.Code == 0){
                html += "<font color='green'>"+json.Msg+"</font> <button class='layui-btn layui-btn-small' onclick='CloseMagicService();'>停止服务</button>";                            
            }else{
                html += "<font color='red'>"+json.Msg+"</font>  <button class='layui-btn layui-btn-small' onclick='OpenMagicService();'>开启服务</button>";
            }
            
            $("#magicStatus").html(html);

        }, 'json');
    }

    function GetNetAgentStatus(){
        $.post("/u/GetNetAgentStatus",{rnd:Math.random()}, function(json) {
            var html = "";
            if(json.Code == 0){
                html += "<font color='green'>"+json.Msg+"</font>";                            
            }else{
                html += "<font color='red'>"+json.Msg+"</font>";
            }
            
            $("#netAgentStatus").html(html);

        }, 'json');
    }

    function ClearNetAgentStatus(){
        $.post("/u/ClearNetAgentStatus",{rnd:Math.random()}, function(json) {
            var html = "";
            if(json.Code == 0){
                $("#netAgentStatus").html("<font color='red'>未检测到Agent连接</font>");                     
            }else{
                layer.alert(json.Msg, {icon: 2});
            }            
            

        }, 'json');
    }

</script>

